<template>
	<view class="loginPage">
		<view class="logo">
			<image src="@/static/user/登录背景@3x.png" mode="widthFix"></image>
			<view class="info">
				<text>妙妈管家</text>
				<text>请先登录哦~</text>

			</view>
		</view>

		<view class="loginForm">
			<view class="row-input">
				<input placeholder="请输入手机号" v-model="mobile" maxlength="11" placeholder-class="placeholder" />
			</view>
			<view class="row-input">
				<input placeholder="请输入验证码" v-model="code" maxlength="6"  placeholder-class="placeholder" />
				<!-- <view class="yzminner">
					获取验证码
				</view> -->
				<view class="yzminner" @click="sendCode" v-if="!verificationTime">
					获取验证码
				</view>
				<view class="yzminner" v-if="verificationTime">
					重新获取{{verificationTime}}s
				</view>
			</view>
			<view class="loginBtn" @click="login">登录</view>
			<!-- <view class="menuLink">
				<text @click="navTo('/intake/register')">注册账号</text>
				<text @click="navTo('/intake/forget')">忘记密码</text>
			</view> -->
		</view>
	</view>
</template>

<script setup>
	const {
		Theme,
		onShow
	} = useTheme()
	const {
		proxy
	} = getCurrentInstance()
	onLoad(() => {

	})

	onShow(() => {

	})
	const mobile = ref(null)
	const code = ref(null)
	const verificationTime = ref('')
	const timer=ref('')
	const msgOrderNo=ref('')

	const navTo = path => {
		proxy.sjuNav.navigateTo(path)
	}
	const sendCode =() => {
		console.log(mobile.value)
		
		let myreg = /^[1]\d{10}$/;
		if (!myreg.test(mobile.value)) {
			// this.$utils.msg("请输入移动手机号");
			proxy.sjuAlert.showInfo('请输入移动手机号',2000)
		} else {
			verificationTime.value = 60
			verificationDown()
			proxy.sjuRequest.request("/api/weixin/sendCode/"+proxy.sjuConfig.appInfo.appId, 'post',{
				"mobile":mobile.value
			}).then(res => {
				console.log(res)
				if(res.code=="0000"){
					msgOrderNo.value = res.msgOrderNo;
				}else{
					proxy.sjuAlert.showError("验证码发送失败");
				}
			})
		}
	}
	const login =() => {
		// proxy.sjuLogin.saveValue("miaoMaGJOpenid","oH4Fc68LGPfTiRurIvMWK7wN_3nE");
		if(proxy.sjuBase.isNull(mobile) || proxy.sjuBase.isNull(code)){
			proxy.sjuAlert.showError("手机号或验证码不能为空");
		}else{
			proxy.sjuRequest.request("/api/weixin/loginUser/"+proxy.sjuConfig.appInfo.appId, 'post',{
				"mobile":mobile.value,
				"openId":proxy.sjuLogin.getValue("miaoMaGJOpenid"),//  o86fR6sSRRfbj1-bKS6jei1p7nhA  proxy.sjuLogin.getValue("miaoOpenid")   张静ovj4e63AZuMW9L0SoM5-M_TH7lH0
				"sendCode":code.value,
				"msgOrderNo":msgOrderNo.value
			}).then(res => {
				console.log(res)
				if(res.code=="200"){
					proxy.sjuAlert.showInfo("登录成功");
					proxy.sjuLogin.saveValue("miaoMaGJMobile",res.data.phone);
					proxy.sjuLogin.saveValue("miaoMaGJlevel",res.data.remark);
					// proxy.sjuLogin.saveValue("miaoOpenid",'ovj4e63AZuMW9L0SoM5-M_TH7lH0');
					
					//proxy.sjuNav.navigateBack()
					proxy.sjuNav.switchTab("/tab/my");
				}else if(res.code=="0001"){
					proxy.sjuAlert.showError(res.msg);
				}else{
					proxy.sjuAlert.showError("验证码错误");
				}
			})
		}
		
	}
	
	const verificationDown = ()=>{
		console.log(123)
		// 设置定时器
		timer.value = setInterval(() => {
			verificationTime.value = verificationTime.value - 1
			if (verificationTime.value < 10) verificationTime.value = '0' + verificationTime.value
			if (verificationTime.value <= 0) {
				// 清除定时器
				clearInterval(timer.value)
				verificationTime.value = ''
			}
		}, 1000)
	}
</script>

<style lang="scss">
	.loginPage {
		width: 100%;
		height: 100%;
	}

	.logo {
		width: 100%;
		height: auto;
		position: relative;

		image {
			width: 100%;
		}

		.info {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			text {
				display: block;
				font-size: 36rpx;
				color: #fff;
				// font-weight: bold;
				line-height: 1.8;
			}
		}
	}

	.loginForm {
		padding: 20rpx 60rpx;

		.row-input {
			margin: 30rpx 0rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0 10rpx;
			height: 100rpx;
			border: 1rpx solid #C9C9C9;
			border-radius: 10rpx;

			image {
				padding: 0rpx 10rpx 0rpx 10rpx;
				width: 50rpx;
				height: 50rpx;
				flex-shrink: 0;
			}

			.iconfont {
				color: #727272;
				padding: 0rpx 10rpx 0rpx 10rpx;
				flex-shrink: 0;
				font-size: 40rpx;
			}

			.placeholder {
				font-size: 30rpx;
				color: #727272;
			}

			input {
				font-size: 30rpx;
				padding: 0rpx 40rpx;
				color: #727272;
				// border-left: 3rpx solid var(--primary-color);
			}
		}

		.loginBtn {
			// display: flex;
			// justify-content: center;
			// align-items: center;
			margin: 0 auto;
			margin-top:80rpx;
			font-size: 35rpx;
			width:80%;
			border-radius: 50px;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			color: #FFFFFF;
			background-color: #569FFD;
		}

		.menuLink {
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			color: var(--btn-bg-color);
			letter-spacing: 3rpx;
			line-height: 80rpx;
		}
	}
</style>